import React, { Component } from 'react';
import {
  View,
  TouchableWithoutFeedback,
  StyleSheet,
  Image,
} from 'react-native';
import Swiper from 'react-native-swiper';
import { px2dp } from 'bee/utils';

// @flow
type Props = {
  slides: Array,
  navigation: Object,
};

class Banner extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Swiper autoplay>
          {this.props.slides.map((slide, key) => (
            <TouchableWithoutFeedback
              key={key}
              onPress={() => {
                this.props.navigation.navigate('product');
              }}
            >
              <Image source={{ uri: slide.img }} style={styles.image} />
            </TouchableWithoutFeedback>
          ))}
        </Swiper>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    flex: 1,
  },
  container: {
    width: px2dp(750),
    height: px2dp(328),
  },
});

export default Banner;
